<template>
	<view>
		<z-nav-bar>我的考勤</z-nav-bar>
		<!-- 公共组件-每个页面必须引入 -->
		<!--<public-module></public-module>-->
		<view class="container">
			<view class="menu-item">
				<base-menu :menus="menuItem" small :iconSize='44' :column="2" />
			</view>
			<view class="content">
				<uni-collapse accordion open>
				    <uni-collapse-item showAnimation style="background: feffff;" :open="true">
						<!-- 自定义标题 -->
						<view slot="title">
							<view class="">
								<text class="block">渝北文科12-1班</text>
							</view>
						</view>
						<!-- 折叠内容主体 -->
				        <view class="">
							<view class="uni-flex uni-row" style="padding: 0 16px;">
								<view class="flex-item uni-bg-red">
									<view class="stat-value">50</view>
									<view class="stat-title">上课次数</view>
								</view>
								<view class="flex-item uni-bg-red">
									<view class="stat-value">1</view>
									<view class="stat-title">请假</view>
								</view>
								<view class="flex-item uni-bg-red">
									<view class="stat-value">0</view>
									<view class="stat-title">迟到</view>
								</view>
								<view class="flex-item uni-bg-red">
									<view class="stat-value">1</view>
									<view class="stat-title">早退</view>
								</view>
								<view class="flex-item uni-bg-red">
									<view class="stat-value">1</view>
									<view class="stat-title">旷课</view>
								</view>
							</view>
				        </view>
				    </uni-collapse-item>
				</uni-collapse>
			</view>
			<view class="calender-card">
				<view class="card-title">
					<text>本月考勤明细</text>
				</view>
				<Calendar :startDate="startDate" :endDate="endDate" :selected="selected" :limitFlag="false"
					:selectedDate="selectedDate" @change="calendarChange" />
				<view class="card-tip">
					<text>当日打卡记录</text>
				</view>
				<view class="card-recode">
					<view class="recode-item">
						<view class="item-start">
							<text class="item-record">打卡时间 08:55</text>
							<text class="item-origin">上课时间 09:00</text>
						</view>
						<view class="item-end item-end-addr">
							<text>渝北区电子校科技楼1号</text>
						</view>
						<view class="item-start">
							<text class="item-record">打卡时间 08:55</text>
							<text class="item-origin">上课时间 09:00</text>
						</view>
						<view class="item-end item-end-addr">
							<text>渝北区电子校科技楼1号</text>
							
						</view>
					</view>
					<view class="recode-item">
						<view class="item-start">
							<text class="item-record">打卡时间 08:55</text>
							<text class="item-origin item-later">迟到</text>
							<image @click="open" class="item-remark" src="../static/my/remark.png" mode=""></image>
						</view>
						<view class="item-end">
							<text></text>
						</view>
						<view class="item-start">
							<text class="item-record">打卡时间 08:55</text>
							<text class="item-origin item-none">旷课</text>
						</view>
						<view class="item-end">
							<text></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" :mask-click="false">
			<uni-title title="">老师备注</uni-title>
		    <text>夏同学要注意考勤时间喔，如果临时有急事，也要提前和我或者代课老师说明喔~</text>
		    <button @click="close">知道了</button>
		</uni-popup>
	</view>
</template>

<script>
	import Calendar from '@/components/heqifang-calendar/calendar.vue'
	import { mapState, mapMutations } from 'vuex';
	export default {
		components: {
			Calendar
		},
		data() {
			return {
				isExpand: true,
				startDate: '2021-06-01', //上课开始有效日期
				endDate: '2021-06-30', //上课结束有效日期
				selectedDate: [],
				selected: [{
						date: '2021-04-08',
						info: '有课',
						data: {
							custom: '',
							name: ''
						}
					},
					{
						date: '2021-04-10',
						info: '有课',
						data: {
							custom: '',
							name: ''
						}
					},
					{
						date: '2021-06-23',
						info: '有课',
						data: {
							custom: '',
							name: ''
						}
					},
					{
						date: '2021-06-28',
						info: '有课',
						data: {
							custom: '',
							name: ''
						}
					},
				],
				menuItem: [
					{ judgeIsLogin: true,label: '请假申请', icon: require('@/static/icon/menu/big-01.png'), path: '/subpages/my/askForLeave' },
					{ judgeIsLogin: true,label: '停课申请', icon: require('@/static/icon/menu/big-02.png'), path: '/subpages/my/suspendClass' }
				]
			};
		},
		onLoad(e) {

		},
		onShow() {

		},
		computed:{
			...mapState(['myBanners','oftenFeatures','otherFeatures'])
		},
		//方法
		methods: {
			open() {
				// this.$refs.popup.open('bottom')
				uni.showModal({
					title: '老师备注',
					content: '夏同学要注意考勤时间喔，如果临时有急事，也要提前和我或者代课老师说明喔~',
					confirmText: '知道了',
					showCancel: false,
					cancelColor: '#81B435',
					success: (res) => {
						this.checked = !this.checked
					}
				});
			},
			close() {
				this.$refs.popup.close()
			},
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			calendarChange(e) {
				console.log(e);
				// 当前选择时间
				let _date = e.fulldate;
				// 判断这个时间是否已选中
				let _index = this.selectedDate.indexOf(_date);
				this.selectedDate = [_date]
				if (e.extraInfo.info) {
					uni.navigateTo({
						url: `/subpages/my/course?date=${e.extraInfo.date}`
					});
				}
			}
		},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	.container {
		background: #F5F8FA;
		padding: 16px;
		.menu-item {
			background: #FEFFFF;
			border-radius: 16px;
			/deep/.menu-wrap {
				margin: 0 auto !important;
			}
		}
		.content {
			background: #FEFFFF;
			border-radius: 16px;
			margin-top: 16px;
			overflow: hidden;
		}
		.collapse {
			padding: 0 16!important;
		}
		.stat-info {
			background: #FEFFFF;
			border-radius: 16px;
			height: 343px;
			height: 128px;
			margin-top: 16px;
		}
		.info-title {
			height: 17px;
			left: 32px;
			top: calc(50% - 17px/2 - 356.5px);
			font-family: PingFangSC;
			font-size: 17px;
			line-height: 17px;
			color: #323233;
		}
		.uni-flex {
			display: flex;
		}
		.uni-collapse-cell__content {
			padding: 0 16px;
		}
		/deep/.uni-calendar__box {
			margin: 0 -8px;
		}
		/deep/.uni-collapse-cell{
			background: #feffff !important ;
			border-bottom-width: 0px;
		}
		/deep/.uni-calendar__weeks-item {
			width: 14%;
		}
		.flex-item {
			width: 20%;
			height: 64px;
			text-align: center;
			line-height: 64px;
			position: relative;
			&:nth-child(2) .stat-value {
				color: #2F80ED;
			}
			&:nth-child(3) .stat-value {
				color: #F2994A;
			}
			&:nth-child(4) .stat-value {
				color: #F2994A;
			}
			&:nth-child(5) .stat-value {
				color: #EB5757;
			}
			&::after {
				content: "";
				height: 13px;
				width: 1px;
				background: #aaa;
				position: absolute;
				left: 100%;
				top: 12px;
				transform: scaleX(0.5);
			}
			.stat-value {
				height: 17px;
				font-family: PingFangSC;
				font-size: 17px;
				line-height: 17px;
				text-align: center;
				color: #323233;
				margin-top: 11px;
			}
			.stat-title {
				height: 12px;
				font-family: PingFangSC;
				font-size: 12px;
				line-height: 12px;
				text-align: center;
				color: #969696;
				margin-top: 10px;
			}
			&:last-child ::after {
				background: #feffff !important;
			}
		}
		.flex-item:not(:only-child):last-of-type::after {
			background: #feffff;
		}
		/deep/.uni-calendar__header {
			display: none !important;
		}
		/deep/ .menu-wrap.small .menu-item {
			padding: 16px !important;
		}
		.calender-card {
			margin-top: 16px;
			background-color: #feffff;
			border-radius: 16px;
			overflow: hidden;
			.card-title {
				font-family: Source Han Sans CN;
				font-style: normal;
				font-weight: normal;
				font-size: 12px;
				line-height: 44px;
				height: 44px;
				text-align: center;
				color: #828282;
			}
			.card-tip {
				font-family: PingFangSC;
				font-size: 13px;
				line-height: 13px;
				color: #828282;
				height: 13px;
				margin-top: 10px;
				text-align: center;
			}
			.card-recode {
				.recode-item {
					margin-top: 20px;
					position: relative;
					&::before {
						content: "";
						width: 1px;
						height: 55px;
						background: #ccc;
						background-size: 100%;
						position: absolute;
						transform: scaleX(0.5);
						top: 14px;
						left: 23px;
					}
					.item-start {
						position: relative;
						font-family: PingFangSC;
						font-size: 13px;
						line-height: 13px;
						color: #4F4F4F;
						padding-left: 39px;
						.item-origin {
							font-family: PingFangSC;
							font-size: 10px;
							line-height: 20px;
							color: #828282;
							display: inline-block;
							background: #F2F2F2;
							border-radius: 21px;
							height: 20px;
							margin-left: 9px;
							padding: 0 8px;
						}
						.item-remark {
							height: 10px;
							width: 10px;
							margin-left: 16px;
							display: inline-block;
						}
						.item-later {
							color: #f2994a;
							background: #fdf5ed;
							padding: 0 34px;
						}
						.item-none {
							color: #eb5757;
							background: #fbeeee;
							padding: 0 34px;
						}
						&::before {
							content: "";
							width: 14px;
							height: 14px;
							background: url(../static/my/ellipse.png) no-repeat;
							background-size: 100%;
							position: absolute;
							top: 2px;
							left: 17px;
						}
					}
					.item-end-addr {
						&::before {
							content: "";
							width: 10px;
							height: 12px;
							background: url(../static/my/Shape.png) no-repeat;
							background-size: 100%;
							position: absolute;
							top: 0px;
							left: 42px;
						}
					}
					.item-end {
						font-size: 12px;
						line-height: 12px;
						height: 12px;
						color: #828282;
						margin-top: 12px;
						padding-left: 58px;
						margin-bottom: 20px;
						position: relative;
					}
				}
			}
		}
	}
</style>
